<template>
  <div class="links container">
    <h2>友人帐</h2>
    <p>如果你有自己的
      <strong>网站</strong>
      或者
      <strong>博客</strong>
      ，非常欢迎你可以和
      <strong>{{ $store.state.site.name }}</strong>
      交换友情链接。
      <a-button type="danger" shape="round" size="small" ghost @click="visible = !visible">添加</a-button>
    </p>

    <a-modal
      title="添加友人帐 | 通过审核以后展示"
      :visible="visible"
      @ok="handleSubmit"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel">

      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="名称" has-feedback>
          <a-input
            size="large"
            v-decorator="['name', { rules: [{
              min: 1,
              max: 20,
              required: true,
              message: '请输入网站名称(1-20个字符)'
            }] }]"
          />
        </a-form-item>
        <a-form-item label="Url" has-feedback>
          <a-input
            size="large"
            v-decorator="['url', { rules: [{
              min: 10,
              max: 50,
              type:'url',
              required: true,
              whitespace: true,
              message: '请输入正确的网站链接(10-50个字符)'
            }] }]"
          />
        </a-form-item>
        <a-form-item label="Logo" has-feedback>
          <a-input
            size="large"
            v-decorator="['logo', { rules: [{
              min:10,
              max: 100,
              type:'url',
              required: true,
              whitespace: true,
              message: '请输入正确的网站Logo(10-100个字符)'
            }] }]"
          />
        </a-form-item>
        <a-form-item label="描述" has-feedback>
          <a-textarea
            :rows="4"
            v-decorator="['abstract', { rules: [{
              min:5,
              max: 100,
              type:'string',
              required: true,
              whitespace: true,
              message: '请输入正确的网站描述(5-100个字符)'
            }] }]"
          />
        </a-form-item>
      </a-form>
    </a-modal>

    <a-row :gutter="30">
      <a-col :xs="12" :sm="8" :lg="6" :xl="4" :xxl="4"
             v-for="(item, index) in links" :key="index" style="margin-top: 20px">
        <a-card :hoverable="true" :bordered="false">
          <div  slot="cover" style="text-align: center">
            <img
              alt="站点logo"
              :src="item.logo"
              style="height: 64px;width: 64px"
              :title="item.abstract"
            />
          </div>
          <a-card-meta style="text-align: center">
            <a :href="item.url" target="_blank" slot="title" :title="item.abstract">{{item.name}}</a>
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>
    <div style="display: flex;justify-content: center;align-items: center;height: 80vh">
      <a-empty v-if="links.length === 0" :description="`暂无友人帐...`"/>
    </div>
  </div>
</template>

<script>
  import app from "../../app"
  export default {
    name: "links",
    head: ()=>({ title: "友人帐 - "+app.name }),
    async asyncData({ $axios, store, error }) {
      const resp = await $axios.$get(`${app.api}/api/${app.apiVersion}/links/`);
      let links = resp.code === 200 ? resp.data : [];
      return { links }
    },
    beforeCreate() {
      this.form = this.$form.createForm(this, { name: "links"})
    },
    data: ()=>({
      visible:false,
      confirmLoading:false,
    }),
    methods: {
      handleSubmit(e){
        e.preventDefault();
        this.confirmLoading = true;
        this.form.validateFields((err, values) => {
          if (!err) {
            this.$axios.$post(`${app.api}/api/${app.apiVersion}/link/`, values)
              .then((resp)=>{
                console.log(resp)
                if (resp.code === 200) {
                  this.confirmLoading = false;
                  this.$message.success(resp.msg);
                  this.form.resetFields();
                  this.visible = false;
                }else {
                  this.confirmLoading = false;
                  this.$message.warning(resp.msg)
                }
              }).catch((err)=>{
              this.confirmLoading = false;
            })
          }else {
            this.confirmLoading = false;
          }
        });
      },
      handleCancel(e){
        this.visible = false;
        this.confirmLoading = false;
        this.form.resetFields();
      }
    }
  }
</script>

<style scoped>
  .links{
    margin-top: 120px;
    min-height: 80vh;
  }
  strong{
    color: red;
  }
  @media screen and (max-width: 1023px){
    .links{
      margin-top: 70px;
      margin-left: 20px;
    }
  }
</style>
